import * as React from 'react'
import {
    View, Text, StyleSheet, TouchableOpacity, Image,
} from 'react-native'
import { px2dp } from '../../screen/px2dp'
import { px2sp } from '../../screen/px2sp'

import { TableCellProps } from './index'




export default (props: Partial<TableCellProps>) => {
    const { showNav = false, activeOpacity = .8 } = props
    return (
        <TouchableOpacity activeOpacity={props.onPress == undefined ? activeOpacity : 1}
            style={[styles.container, props.style]}
            disabled={props.onPress == undefined}
            onPress={() => props.onPress && props.onPress()}
        >
            <View style={[styles.warpper, props.showUnderline ? {
                borderBottomColor: '#f2f2f2',
                // borderBottomWidth: StyleSheet.hairlineWidth,
                borderBottomWidth: px2dp(1),
                ...props.underlineStyle
            } : {}]}>
                {props.icon && <Image
                    style={[{ width: px2dp(20), height: px2dp(20), marginRight: px2dp(8) }, props.iconStyle]}
                    resizeMode='contain'
                    source={props.icon}
                />}
                <View style={[styles.middle, props.middleContaierStyle]}>
                    {/* 标题 */}
                    {(() => {
                        if (typeof props.title === 'string' || typeof props.title === 'number') {
                            return (
                                <Text
                                    numberOfLines={1}
                                    {...props.titleOptions}
                                    style={[styles.title, props.titleOptions?.style]}
                                >{props.title}</Text>
                            )
                        }
                        if (React.isValidElement(props.title)) return props.title
                        return <View style={styles.title} />
                    })()}


                    {(() => {
                        if (typeof props.content === 'string' || typeof props.content === 'number') {
                            return (
                                <Text
                                    numberOfLines={1}
                                    {...props.contentOptions}
                                    style={[styles.content, props.contentOptions?.style]}
                                >{props.content}</Text>
                            )
                        }
                        if (React.isValidElement(props.content)) return props.content

                        return undefined
                    })()}
                </View>
                {showNav && (
                    props.nav || <Image
                        style={{ width: px2dp(9), height: px2dp(16), marginLeft: px2dp(8) }}
                        source={require('./back.png')}
                    />
                )}
            </View>

        </TouchableOpacity>

    )
}



const styles = StyleSheet.create({
    container: {
        display: 'flex',
        minHeight: px2dp(44),
        paddingLeft: px2dp(15),
        paddingRight: px2dp(10),
        backgroundColor: 'white',
    },
    warpper: {
        flexGrow: 1,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        position: 'relative',
    },
    middle: {
        flexGrow: 1,
        flexShrink: 1,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        // backgroundColor: 'cyan'
    },
    title: {
        // backgroundColor: 'red',
        flexGrow: 0,
        flexShrink: 0,
        fontSize: px2sp(14),
        color: '#333333'
    },
    content: {
        // backgroundColor: 'yellow',
        flexGrow: 1,
        flexShrink: 1,
        fontSize: px2sp(14),
        color: '#666666',
        textAlign: 'right'
    },
})